<template>
  <div id="bang">
    <!-- 导航栏 -->
    <div class="toptitle">
      <van-nav-bar title="美妆榜" left-text="">
        <template #left>
          <div class="letfimg">
            <img src="../../../assets/images/箭头.png" alt="" />
          </div>
        </template>
        <template #right>
          <div class="rightimg">
            <img src="../../../assets/images/搜素.png" alt="" />
          </div>
        </template>
      </van-nav-bar>
    </div>

    <div class="classify">
      <!-- 分类栏 -->
      <van-tabs
        color="white"
        title-active-color="#64C8C8"
        title-inactive-color="#999999"
        :border="true"
      >
        <van-tab v-for="index in 10" :title="'标签 ' + index" :key="index">
          <div class="more" @click="showlist">more</div>
          <div class="morelist">
            <van-grid :column-num="3">
              <van-grid-item
                v-for="value in 6"
                :key="value"
                icon="photo-o"
                text="文字"
              />
            </van-grid>
          </div>
          <!-- 商品列表 -->
          <div class="shopping">
            <van-card
              desc="描述信息"
              :title="'标签 ' + index"
              thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
            >
              <template #tags>
                <van-tag plain type="danger">
                  <div>
                    <span class="dengji"> {{ index * 10 }} </span>
                    <span>( {{ index }} 评分)</span>
                  </div>
                </van-tag>
                <div class="price">
                  <i>地点 · ￥ {{ index }} 价格</i>
                </div>
              </template>
            </van-card>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  // data() {
  //   return {
  //     showlist: false,
  //   };
  // },
  mounted() {
    //请求数据
    this.showlist();
  },
  methods: {
    onClickLeft() {
      Toast("返回");
    },
    onClickRight() {
      Toast("按钮");
    },
    showlist() {
      console.log(1);
    },
  },
};
</script>
<style lang="less" scoped>
#bang {
  background: white;
}
// 头部标题
:deep(.van-nav-bar__title) {
  font-weight: 900;
}

//分类页面
.letfimg img {
  width: 11px;
  height: 18px;
}
.rightimg img {
  width: 23px;
  height: 22px;
}
.classify {
  border-bottom: 1px solid #f1f1f1;
  border-top: 1px solid #f1f1f1;
}
:deep(.van-tab) {
  font-weight: 900;
}
:deep(.van-card__title) {
  font-size: 15px;
  font-weight: 900;
  line-height: 20px;
}
:deep(.van-card__desc) {
  color: #959595;
  font-size: 11px;
}

//更多列表
.more {
  width: 47px;
  height: 31px;
  font-size: 18px;
  background: turquoise;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 6px;
  right: 0;
}
.morelist {
  width: 100%;
  background: turquoise;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 55px;
  right: 0;
  z-index: 999;
  display: none;
}
//商品列表页
.van-card {
  border-top: 1px solid #f1f1f1;
  background: white;
}
span {
  line-height: 18px;
  font-size: 14px;
  margin-right: 5px;
}
.dengji {
  color: #68dcdc;
  font-weight: 900;
}
.price {
  line-height: 24px;
  i {
    color: #999999;
    font-size: 10px;
  }
}
</style>
